<!-- <!DOCTYPE html> -->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!-- 使用UTF-8 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 设置移动终端可视区域 -->
		<meta content="telephone=no" name="format-detection">
		<!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
		<title>任务调整列表</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<link href="css/weui.css" type="text/css" rel="stylesheet" />
	</head>
	<body style="background: #F6F6F6;">
		<div class="evaluate" id="containerVue" v-cloak>
			<div class="headerView">
				<i onclick="closeView()">&#139;</i>
				<h1>"966588"查询系统</h1>
				<div></div>
				<div class="right" @click="choiceView">筛选</div>
			</div>
			<div class="choice_tip" v-if="choice">
				<div class="choice_view">
					<div class="choice">
						<div class="name">任务调整类型</div>
						<div class="text" @click="adjustOpen"><input type="text" readonly v-model="adjustType"/></div>
						<!-- 投诉原因选择 -->
						<div class="selectView" v-if="proType">
							<div class="ulView">
								<div class="title">任务调整类型</div>
								<div class="ul" style="padding: 0 2rem .5rem;">
									<div class="li" v-for="item in adjust" :class="[item.value == param.type?'active':'']" @click="causeSelect(item)">
										<img src="./image/select.png" alt="">
										<img src="./image/selected.png" class="check" alt="">
										<div>{{item.title}}</div>
									</div>
								</div>
								<div class="selectbtn">
									<!-- <div @click="causeBoole = false">取消</div> -->
									<div @click="selectCause" style="color: #2e84db;">确定</div>
								</div>
							</div>
						</div>
					</div>
					<div class="choice">
						<div class="name">项目名称</div>
						<div class="text"><input type="text" v-model="param.projectName" /></div>
					</div>
					<div class="choice">
						<div class="name">任务调整日期</div>
						<div class="text">
							<input type="text" style="width: 44%;" id="startTime" readonly/>
							<span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
							<input type="text" style="width: 45%;" id="endTime" readonly/>
						</div>
					</div>
					<div class="choice_btn">
						<div class="btn_view" @click="choice = false">关闭</div>
						<div class="btn_view active" @click="search()">确定</div>
					</div>
				</div>
			</div>
			<div v-if="taskList.length > 0">
				<div class="cont evaluateList" v-for="item in taskList">
					<div class="evaluateText">
						<img src="image/icons_xmmc.png" class="icon">
						<div class="label">项目名称</div>
						<div class="text" style="color: #333;font-weight: bold;">{{item.projectName}}</div>
					</div>
					<div class="evaluateText">
						<img src="image/icons_tzry.png" class="icon">
						<div class="label">调整人员</div>
						<div class="text">{{item.createBy}}</div>
					</div>
					<div class="evaluateText">
						<img src="image/icons_tzlx.png" class="icon">
						<div class="label">调整类型</div>
						<div class="text">{{item.type}}</div>
					</div>
					<div class="evaluateText" v-if="item.adjustTime">
						<img src="image/icons_rwztrq.png" class="icon">
						<div class="label">{{item.type}}时间</div>
						<div class="text">{{item.adjustTime}}</div>
					</div>
					<div class="evaluateText" v-if="item.description">
						<img src="image/icons_qkms.png" class="icon">
						<div class="label">情况描述</div>
						<div class="text">{{item.description}}</div>
					</div>
					<div class="evaluateText" v-if="item.auditResult">
						<img src="image/icons_tsyj.png" class="icon">
						<div class="label">处理结果</div>
						<div class="text">{{item.auditResult}}</div>
					</div>
					<div class="evaluateText" v-if="item.auditOpinion">
						<img src="image/icons_clyj.png" class="icon">
						<div class="label">处理意见</div>
						<div class="text">{{item.auditOpinion}}</div>
					</div>
					<div class="isRead" v-if="item.auditOpinion" style="background-color: seagreen;">已处理</div>
					<div class="isRead" v-else>未处理</div>
				</div>
			</div>
			<div v-else class="cont taskList kong"><img src="image/kong.png" alt="">暂无评价信息</div>
			<!-- loading 加载 -->
			<div style="opacity: 1;" v-if="loading">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
					<p class="weui-toast__content">加载中</p>
				</div>
			</div>
		</div>
		<script src="script/jquery-3.5.js"></script>
		<script src="script/vue.js"></script>
		<script src="script/api.js"></script>
		<script src="script/ajax.js"></script>
		<script src="script/laydate/laydate.js"></script>
		<script>
			var app = new Vue({
				el: '#containerVue',
				data: {
					info: {}, // 详情信息
					param: {
						projectName: "",
						startDate: "",
						endDate: "",
						type: "",
						pageNo: 1,
						pageSize: 10
					},
					isEnd: false,
					isAjax: false,
					loading: false,
					taskList: [],
					choice: false, // 筛选条件
					proType: false,
					adjust: [],
					adjustType: '',
				},
				created() {
					this.getadjust();
					this.getList(true);
				},
				watch: {
					
				},
				methods: {
					getadjust() {
						// 获取投诉原因
						var that = this;
						ajaxHttp({
							url: 'jeecg-boot/sys/dict/getDictItems/DutyChange',
							type: 'get',
							data: {},
							success: function(res) {
								if (res.success) {
									that.adjust = res.result
								} else {
									$.Jwarning(res.message)
								}
							}
						});
					},
					selectCause() {
						this.proType = false;
						if (this.param.type == 1) {
							this.adjustType = "任务变更"
						} else if (this.param.type == 2) {
							this.adjustType = "任务取消"
						} else if (this.param.type == 3) {
							this.adjustType = "任务暂停"
						} else if (this.param.type == 4) {
							this.adjustType = "任务重启"
						}
					},
					causeSelect(e) {
						this.param.type = e.value;
					},
					adjustOpen() {
						this.proType = true;
					},
					// 筛选功能
					search() {
						var that = this;
						this.param.pageNo = 1;
						that.isEnd = false;
						document.body.scrollTop = 0;
						that.getList(true);
						this.choice = false;
					},
					// 日期筛选
					choiceView() {
						this.choice = true;
						this.param.projectName = "";
						this.param.startDate = "";
						this.param.endDate = "";
						this.param.type = "";
						this.adjustType = "";
						setTimeout(function() {
							laydate.render({
								elem: "#startTime", //指定元素
								type: 'date',
								format: 'yyyy-MM-dd',
								trigger: 'click',
								showBottom: false,
								theme: '#0787d5',
								done: function(value, date, endDate) {
									app.param.startDate = value + " 00:00:00";
								}
							});
							laydate.render({
								elem: "#endTime", //指定元素
								type: 'date',
								format: 'yyyy-MM-dd',
								trigger: 'click',
								showBottom: false,
								theme: '#0787d5',
								done: function(value, date, endDate) {
									app.param.endDate = value + " 23:59:59";
								}
							});
						}, 5 * 100);
					},
					// 获取详情
					getList(selet_type) {
						var that = this;
						if (that.isEnd || that.isAjax) {
							return;
						}
						that.isAjax = true;
						// 请求投诉详情信息
						ajaxHttp({
							url: 'jeecg-boot/node/nodeProjectAdjustment/getPageListByUser',
							type: 'post',
							data: that.param,
							beforeSend: function() {
								that.loading = true
							},
							success: function(res) {
								// console.log(JSON.stringify(res));
								that.isAjax = false;
								if (res.success) {
									if (selet_type) {
										that.taskList = res.result.records;
									} else {
										that.taskList = that.taskList.concat(res.result.records);
									}
									that.isEnd = res.result.pages == that.param.pageNo;
									++that.param.pageNo;
								} else {
									$.Jwarning(res.message)
									that.taskList = [];
								}
							},
							complete: function() {
								that.loading = false;
							}
						})
					}
				}
			})
			// 上拉触底事件
			var screenHeight = window.screen.height;
			window.onscroll = function() {
				if (screenHeight + document.body.scrollTop >= document.body.scrollHeight - 50) {
					app.getList(false)
				}
			}
		</script>
	</body>
</html>
